const path = require('path');
const DonePlugin = require('./plugins/DonePlugin');
const AssetPlugin = require('./plugins/AssetPlugin');
const ZipPlugin = require('./plugins/ZipPlugin');
const HashPlugin = require('./plugins/HashPlugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const AutoExternalPlugin = require('./plugins/AutoExternalPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode:'development',
    devtool:false,
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].[hash].js'
    },
    /* externals:{
        'jquery':'jQuery'//key是我们代码中引入的模块名，值是一个window上的全局变量名
    }, */
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        //new DonePlugin(),
        //new AssetPlugin(),
        /* new ZipPlugin({
            filename:'assets_[timestamp].zip'
        }), */
        //new HashPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css'
        }),
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html?v=[hash] '
        }),
        new AutoExternalPlugin({
            jquery: {//当打包jquery的时候，会自动引入window.jQuery
                expose: "jQuery",//通过在引入CDN脚本之后自引入的全局变量名
                //在生成HTML文件的时候，会自动向产出的HTML文件时引入一个外链的JS
                url: "https://cdn.bootcss.com/jquery/3.1.0/jquery.js",
            },
            lodash: {//当打包jquery的时候，会自动引入window.jQuery
                expose: "_",//通过在引入CDN脚本之后自引入的全局变量名
                //在生成HTML文件的时候，会自动向产出的HTML文件时引入一个外链的JS
                url: "https://cdn.bootcss.com/lodash/3.1.0/lodash.js",
            }
        })
    ]
}